<template>
  <div>{{ store.count }}</div>
  <div>{{ count }}</div>
  <div>{{ name }}</div>
  <button @click="change">更新</button>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store";
const store = useMainStore();
const { count, name } = storeToRefs(store);

const change = () => {
  // 1. 简单修改
  count.value++;

  // 2. 批量修改（对象）
  // store.$patch({
  //   count: 100,
  //   name: '孙远杰'
  // })

  // 3. 批量修改（回调函数）
  // store.$patch((state) => {
  //   state.count++;
  //   state.name = "华天晓";
  // });

  // 4. 使用action
  store.add()

};
</script>

<style>
</style>